<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="/nft.ico" />
    <title>自然框架源码的目录</title>
    <!-- vue3 -->
    <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script>
    <!-- element-plus 的 css -->
    <link href="https://unpkg.com/element-plus@2.0.6/dist/index.css" rel="stylesheet"/>
    <!-- element-plus -->
    <script src="https://unpkg.com/element-plus@2.0.6/dist/index.full.js"></script>
  </head>
  <body style="margin: 20px;">
    <div id="app">
      <el-skeleton :loading="loading">
        <h1>自然框架源码的目录：</h1>
        <el-row gutter="20">
          <el-col :span="12">
            前端-UI库：
            <el-card shadow="always" style="margin: 10px;"
              v-for="(item, index) in listSource"
              :key="index"
            >
              <el-link type="warning" :href="item.href" target="_blank">
                {{item.title}}
              </el-link>
              <p v-html="item.remark"></p>
              <br>
              <el-link type="danger" :href="item.online" target="_blank">
                在线演示
              </el-link>&nbsp; &nbsp; &nbsp;
              <el-link type="danger" :href="item.online" target="_blank">
                在线文档
              </el-link>
              <br>
            </el-card>
          </el-col>
          <el-col :span="12">
            前端-其他：
            <el-card shadow="always" style="margin: 10px;"
              v-for="(item, index) in listOther"
              :key="index"
            >
              <el-link type="warning" :href="item.href" target="_blank">
                {{item.title}}
              </el-link>
              <p v-html="item.remark"></p>
              <br>
              <el-link type="danger" :href="item.online" target="_blank">
                在线演示
              </el-link>&nbsp; &nbsp; &nbsp;
              <el-link type="danger" :href="item.online" target="_blank">
                在线文档
              </el-link>
              <br>
            </el-card>
          </el-col>
          <el-col :span="12">
            后端项目：
            <el-card shadow="always" style="margin: 10px;"
              v-for="(item, index) in listNode"
              :key="index"
            >
              <el-link type="warning" :href="item.href" target="_blank">
                {{item.title}}
              </el-link>
              <p v-html="item.remark"></p>
              <br>
              <el-link type="danger" :href="item.online" target="_blank">
                在线演示
              </el-link>&nbsp; &nbsp; &nbsp;
              <el-link type="danger" :href="item.online" target="_blank">
                在线文档
              </el-link>
              <br>
            </el-card>
          </el-col>
        </el-row>
        <el-input
          v-model="areaList"
          :rows="5"
          type="textarea"
          placeholder=""
          style="width: 500px;"
        />
      </el-skeleton>
    </div>
    
    <script>
      const { reactive, ref, onMounted } = Vue

      // 类库
      const listSource = reactive([
        {
          title: '二次封装UI库的共用属性和函数',
          href: 'https://gitee.com/naturefw-code/nf-rollup-ui-controller',
          online: 'https://naturefw-code.gitee.io/nf-rollup-ui-controller/',
          doc: ' https://nfpress.gitee.io/doc-ui-core/',
          remark: '二次封装UI库的共用属性和函数，便于统一风格和复用代码。'
        },
        {
          title: '二次封装 ElementPlus ',
          href: 'https://gitee.com/naturefw-code/nf-rollup-ui-element-plus',
          online: 'https://naturefw-code.gitee.io/nf-rollup-ui-element-plus/',
          doc: 'https://nfpress.gitee.io/doc-ui-elp',
          doc: '',
          remark: '封装一下 ElementPlus，实现低代码工具。'
        },
        {
          title: '二次封装 AntDV （待实现）',
          href: 'https://gitee.com/naturefw-code/nf-rollup-ui-antdv',
          online: '',
          doc: '',
          remark: '封装一下 Ant Design of Vue，实现低代码工具。'
        },
        {
          title: '生成 meta 的工具',
          href: 'https://gitee.com/naturefw-code/nf-rollup-help',
          online: 'https://naturefw-code.gitee.io/nf-rollup-help/',
          doc: '',
          remark: '依据文档创建 meta，然后提供可视化工具修改 meta'
        }
      ])

      // 前端其他
      const listOther = reactive([
        {
          title: '轻量级状态管理',
          href: 'https://gitee.com/naturefw-code/nf-rollup-state',
          online: 'https://naturefw-code.gitee.io/nf-rollup-state/',
          doc: '',
          remark: '基于 reactive 的简单的状态管理'
        },
        {
          title: 'indexedDB、webSQL的help',
          href: 'https://gitee.com/naturefw-code/nf-rollup-webstorage',
          online: 'https://naturefw-code.gitee.io/nf-rollup-webstorage/',
          doc: 'https://nfpress.gitee.io/doc-webstorage/',
          remark: 'indexedDB、webSQL 使用方式的封装，便于使用'
        },
        {
          title: '加载 meta',
          href: 'https://gitee.com/naturefw-code/nf-rollup-meta',
          online: 'https://naturefw-code.gitee.io/nf-rollup-meta/',
          doc: '',
          remark: '解决在运行的时候如何加载、缓存 meta 的问题'
        },
        {
          title: '常用的js函数库',
          href: 'https://gitee.com/naturefw-code/nf-rollup-tool',
          online: 'https://naturefw-code.gitee.io/nf-rollup-tool/',
          doc: '',
          remark: '判断类型等。'
        }
      ])

      // 后端项目
      const listNode = reactive([
       
      ])

      const getAreaList = () => {
        const arr = []
        arr.push('\n1. 类库：')
        listSource.forEach(item => {
          arr.push(`    * [${item.title}](${item.href})`)
        })
        arr.push('\n2. UI库：')
        listNode.forEach(item => {
          arr.push(`    * [${item.title}](${item.href})`)
        })
        arr.push('\n3. 其他：')
        listOther.forEach(item => {
          arr.push(`    * [${item.title}](${item.href})`)
        })

        return arr.join('\n')
      }

      const App = {
        setup () {
          const message = '做个目录'
          const loading = ref(true)
          const areaList = getAreaList()

          onMounted(() => {
            loading.value = false
          })

          return {
            areaList,
            listSource,
            listNode,
            listOther,
            message,
            loading
          }
        }
      }
      const app = Vue.createApp(App)
      app.use(ElementPlus).mount("#app")
    </script>
  </body>
</html>
